<template>
  <div id="member-points">
    <div class="content-points" v-loading="loading">
      <div class="header-points">
        <div class="left">
          <div class="left-wrap">
            <div class="h6">CLP</div>
            <div class="num">{{walletObj.red_credit || 0}}</div>
          </div>
          <div class="left-wrap">
            <div class="h6">RP</div>
            <div class="num">{{walletObj.white_credit || 0}}</div>
          </div>
          <div class="left-wrap">
            <!-- <div class="h6">库存积分</div>
            <div class="num">0.00</div> -->
          </div>
        </div>
        <div class="right">
          <el-button size="medium" round @click="$router.push({path: 'points_apply',query:{type: 1}})"> {{ $t('member.points.points.pointsToU') }}</el-button>
          <!-- <el-button size="medium" round @click="$router.push({path: 'points_apply',query:{type: 2}})">U兑积分</el-button> -->
        </div>
      </div>
      <div class="blance-table" >
        <el-table
          :data="pointsArr"
          style="width: 100%">
          <el-table-column
            style="padding-left: 25px;"
            :label="$t('member.points.points.pointsType') "
            width="120">
            <template slot-scope="scope">
              <span>RP</span>
            </template>

          </el-table-column>
          <el-table-column
            :label="$t('member.points.points.totalPoints') ">
            <template slot-scope="scope">
              <span>{{ 0.0000}}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('member.points.points.cumulativeReturn') ">
            <template slot-scope="scope">
              <span>{{ 0.0000}}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('member.points.points.returnToday') ">
            <template slot-scope="scope">
              <span>{{ 0.0000}}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('member.points.points.otherReturns') ">
            <template slot-scope="scope">
              <span>{{ 0.0000}}</span>
            </template>
          </el-table-column>
          <el-table-column style="padding-right: 25px;" align="right" width="290" :label="$t('member.points.points.operating') ">
            <template slot-scope="scope">
              <el-button type="text" @click="$router.push({path: 'points_apply',query:{type: 1}})"> {{ $t('member.points.points.pointsToU') }}</el-button>
              <el-button type="text" @click="$router.push({path: 'points_list'})"> {{ $t('member.points.points.viewFlow') }}</el-button>
              <!-- <el-button type="text" @click="$router.push({path: 'points_apply',query:{type: 2}})">U兑积分</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
  </div>
</template>

<script>
import { walletFn } from '@/api/member/blance'
export default {
  data() {
    return {
      pointsArr: [1],
      loading: true,
      // walletArr: [],
      walletObj:{},
    };
  },
  created() {
    this.getWallet();
  },
  mounted() {

  },
  methods: {
    getWallet(){
      walletFn().then(res => {
        if(res.code == 0){
          this.walletObj = res.data;
          // this.walletArr = this.walletObj.wallet;
        }
        this.loading = false
      }).catch(err => {
      this.loading = false
        this.$message.error(err.message);
      });
    },
  }
};
</script>

<style lang="scss">
  #member-points {
    .blance-table {
      th:first-child,td:first-child {
        padding-left: 20px;
      }
      th:nth-child(6),td:nth-child(6) {
        padding-right: 20px;
      }
    }
  }
</style>

<style scoped lang="scss">
  .header-points {
    width: 100%;
    background: #fff;
    padding: 36px 20px 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    .left {
      width: calc(100% - 40%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left-wrap {
        color: #303133;
        .h6 {
          font-size: 14px;
          line-height: 20px;
          margin-bottom: 13px;
        }
        .num {
          font-size: 32px;
          line-height: 45px;
        }
      }
    } 
    .right {
      width: 40%;
      padding-top: 35px;
      padding-left: 180px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-button {
        width: 95px;
        height: 34px;
        border-radius: 17px;
        border: 1px solid #FF547B;
        color: #FF547B;
        
      }
      .el-button:hover {
        background: #FF547B;
        color: #fff;
      }
    }
  }
  .blance-table {
    width: 100%;
    background: #fff;
    min-height: 400px;
  }
</style>
